<template>
	<view class="picker-item">
		<view class="pickerBtn" v-if="flag">
			<view class="cancer" @tap="cancer">取消</view>
			<view class="confirm" @tap="changeBirthday">确定</view>
		</view>

		<view class="pickerView" v-if="flag">
			<picker-view class="picker-v" :value="calendar.value" indicator-class="indicator" @change="bindBirthdayChange">
				<picker-view-column class="column">
					<view v-for="(item, index) in calendar.years" :key="index">{{ item + '年' }}</view>
				</picker-view-column>
				<picker-view-column class="column">
					<view v-for="(item, index) in calendar.months" :key="index">{{ item + '月' }}</view>
				</picker-view-column>
				<picker-view-column class="column">
					<view v-for="(item, index) in calendar.days" :key="index">{{ item + '日' }}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		flag: Boolean
	},
	data() {
		return {
			calendar: {
				years: [],
				months: [],
				days: [],
				year: 0,
				month: 0,
				day: 0,
				value: [0, 0, 0]
			}
		};
	},
	methods: {
		changeBirthday(){
			if(this.calendar.year&&this.calendar.year>0
			&&this.calendar.month&&this.calendar.month>0
			&&this.calendar.day&&this.calendar.day>0){

				this.$emit('confirm',{year:this.calendar.year,month:this.calendar.month,day:this.calendar.day})
			}
		},
		cancer(){
			this.$emit('cancer');
		},
		bindBirthdayChange(e) {
			const val = e.detail.value;
			this.calendar.year = this.calendar.years[val[0]];
			this.calendar.month = this.calendar.months[val[1]];
			this.calendar.day = this.calendar.days[val[2]];
			if (val[1]) {
				switch (this.calendar.months[val[1]]) {
					case 1:
					case 3:
					case 5:
					case 7:
					case 8:
					case 12:
						this.calendar.days = [];
						for (let i = 1; i <= 31; i++) {
							this.calendar.days.push(i);
						}
						break;
					case 2:
						this.calendar.days = [];
						let year = this.calendar.years[val[0]];
						let hundred = year % 100;
						let flag = hundred === 0 ? (year % 400 === 0 ? true : false) : year % 4 === 0 ? true : false;

						if (val[0] && flag) {
							for (let i = 1; i <= 29; i++) {
								this.calendar.days.push(i);
							}
							break;
						}
						for (let i = 1; i <= 28; i++) {
							this.calendar.days.push(i);
						}
						break;
					default:
						this.calendar.days = [];
						for (let i = 1; i <= 30; i++) {
							this.calendar.days.push(i);
						}
						break;
				}
			}
		},
		initCalendar() {
			let year = new Date().getFullYear();
			for (let i = year - 18; i >= year - 100; i--) {
				this.calendar.years.push(i);
			}
			for (let i = 1; i <= 12; i++) {
				this.calendar.months.push(i);
			}
			for (let i = 1; i <= 31; i++) {
				this.calendar.days.push(i);
			}
		}
	},
	mounted() {
		this.initCalendar();
	}
};
</script>

<style lang="less" scoped>
.picker-item{
	position: relative;
}
.pickerView {
	.picker-v {
		background-color: #fff;
		width: 100%;
		height: 600rpx;
		z-index: 900;
		.column {
			font-size: 50rpx;
			color: #3333333;
			text-align: center;
			line-height: 80rpx;
			view {
				font-size: 36rpx;
			}
		}
	}
	.indicator {
		height: 68rpx;
	}
}
.pickerBtn {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: #e6e6e6;
	.cancer {
		color: #999999;
		padding-left: 40rpx;
		box-sizing: border-box;
		font-size: 38rpx;
	}
	.confirm {
		color: #0076ff;
		padding-right: 40rpx;
		box-sizing: border-box;
		font-size: 38rpx;
	}
}
</style>
